{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Highmaps Demos\n",
    "================\n",
    "Categorized areas: http://www.highcharts.com/maps/demo/category-map\n",
    "--------------------------------------------------------------------"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/highmaps.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/map.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/data.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/maps/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.highcharts.com/mapdata/custom/europe.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "        \t    &lt;div id=&quot;container&quot; style=&quot;width:650px;height:500px;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "            var geojson = Highcharts.geojson(Highcharts.maps[&quot;custom/europe&quot;]);\n",
       "\n",
       "        \tHighcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;title&quot;: {&quot;text&quot;: &quot;Europe time zones&quot;}, &quot;series&quot;: {}, &quot;mapNavigation&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {}, &quot;chart&quot;: {&quot;spacingBottom&quot;: 20, &quot;width&quot;: 650, &quot;renderTo&quot;: &quot;container&quot;, &quot;height&quot;: 500}, &quot;tooltip&quot;: {}, &quot;plotOptions&quot;: {&quot;map&quot;: {&quot;joinBy&quot;: [&quot;iso-a2&quot;, &quot;code&quot;], &quot;dataLabels&quot;: {&quot;color&quot;: &quot;white&quot;, &quot;style&quot;: {&quot;fontWeight&quot;: &quot;bold&quot;}, &quot;formatter&quot;: function () {                                        if (this.point.properties &amp;&amp; this.point.properties.labelrank.toString() &lt; 5) {                                            return this.point.properties[&#x27;iso-a2&#x27;];                                        }                }, &quot;enabled&quot;: true, &quot;format&quot;: null}, &quot;allAreas&quot;: false, &quot;tooltip&quot;: {&quot;headerFormat&quot;: &quot;&quot;, &quot;pointFormat&quot;: &quot;{point.name}: &lt;b&gt;{series.name}&lt;/b&gt;&quot;}, &quot;mapData&quot;: Highcharts.maps[&#x27;custom/europe&#x27;]}}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;xAxis&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {&quot;enabled&quot;: true}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;data&quot;: [{&quot;code&quot;: &quot;IE&quot;}, {&quot;code&quot;: &quot;IS&quot;}, {&quot;code&quot;: &quot;GB&quot;}, {&quot;code&quot;: &quot;PT&quot;}], &quot;type&quot;: &quot;map&quot;, &quot;name&quot;: &quot;UTC&quot;, &quot;mapData&quot;: geojson}, {&quot;data&quot;: [{&quot;code&quot;: &quot;NO&quot;}, {&quot;code&quot;: &quot;SE&quot;}, {&quot;code&quot;: &quot;DK&quot;}, {&quot;code&quot;: &quot;DE&quot;}, {&quot;code&quot;: &quot;NL&quot;}, {&quot;code&quot;: &quot;BE&quot;}, {&quot;code&quot;: &quot;LU&quot;}, {&quot;code&quot;: &quot;ES&quot;}, {&quot;code&quot;: &quot;FR&quot;}, {&quot;code&quot;: &quot;PL&quot;}, {&quot;code&quot;: &quot;CZ&quot;}, {&quot;code&quot;: &quot;AT&quot;}, {&quot;code&quot;: &quot;CH&quot;}, {&quot;code&quot;: &quot;LI&quot;}, {&quot;code&quot;: &quot;SK&quot;}, {&quot;code&quot;: &quot;HU&quot;}, {&quot;code&quot;: &quot;SI&quot;}, {&quot;code&quot;: &quot;IT&quot;}, {&quot;code&quot;: &quot;SM&quot;}, {&quot;code&quot;: &quot;HR&quot;}, {&quot;code&quot;: &quot;BA&quot;}, {&quot;code&quot;: &quot;YF&quot;}, {&quot;code&quot;: &quot;ME&quot;}, {&quot;code&quot;: &quot;AL&quot;}, {&quot;code&quot;: &quot;MK&quot;}], &quot;type&quot;: &quot;map&quot;, &quot;name&quot;: &quot;UTC + 1&quot;}, {&quot;data&quot;: [{&quot;code&quot;: &quot;FI&quot;}, {&quot;code&quot;: &quot;EE&quot;}, {&quot;code&quot;: &quot;LV&quot;}, {&quot;code&quot;: &quot;LT&quot;}, {&quot;code&quot;: &quot;BY&quot;}, {&quot;code&quot;: &quot;UA&quot;}, {&quot;code&quot;: &quot;MD&quot;}, {&quot;code&quot;: &quot;RO&quot;}, {&quot;code&quot;: &quot;BG&quot;}, {&quot;code&quot;: &quot;GR&quot;}, {&quot;code&quot;: &quot;TR&quot;}, {&quot;code&quot;: &quot;CY&quot;}], &quot;type&quot;: &quot;map&quot;, &quot;name&quot;: &quot;UTC + 2&quot;}, {&quot;data&quot;: [{&quot;code&quot;: &quot;RU&quot;}], &quot;type&quot;: &quot;map&quot;, &quot;name&quot;: &quot;UTC + 3&quot;}]\n",
       "    \t    option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Map(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "\t});\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt;\" height=500 width=650></iframe>"
      ],
      "text/plain": [
       "<highcharts.highmaps.highmaps.Highmap at 0x7f48101bc390>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from highcharts import Highmap\n",
    "H = Highmap(width=650, height=500)\n",
    "\n",
    "options = {\n",
    "    'chart': {\n",
    "        'spacingBottom': 20\n",
    "    },\n",
    "    'title' : {\n",
    "        'text' : 'Europe time zones'\n",
    "    },\n",
    "\n",
    "    'legend': {\n",
    "        'enabled': True\n",
    "    },\n",
    "\n",
    "    'plotOptions': {\n",
    "        'map': {\n",
    "            'allAreas': False,\n",
    "            'joinBy': ['iso-a2', 'code'],\n",
    "            'dataLabels': {\n",
    "                'enabled': True,\n",
    "                'color': 'white',\n",
    "                'formatter': \"function () {\\\n",
    "                                        if (this.point.properties && this.point.properties.labelrank.toString() < 5) {\\\n",
    "                                            return this.point.properties['iso-a2'];\\\n",
    "                                        }\\\n",
    "                }\",\n",
    "                'format': None,\n",
    "                'style': {\n",
    "                    'fontWeight': 'bold'\n",
    "                }\n",
    "            },\n",
    "            'mapData': \"Highcharts.maps['custom/europe']\",\n",
    "            'tooltip': {\n",
    "                'headerFormat': '',\n",
    "                'pointFormat': '{point.name}: <b>{series.name}</b>'\n",
    "            }\n",
    "\n",
    "        }\n",
    "    }\n",
    "} \n",
    "\n",
    "\n",
    "\n",
    "data1 = [{'code': x} for x in ['IE','IS', 'GB', 'PT']]\n",
    "data2 = [{'code': x} for x in ['NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL', 'CZ', 'AT', 'CH', 'LI', 'SK', 'HU',\\\n",
    "                    'SI', 'IT', 'SM', 'HR', 'BA', 'YF', 'ME', 'AL', 'MK']]\n",
    "data3 = [{'code': x} for x in ['FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR', 'TR', 'CY']]\n",
    "data4 = [{'code': x} for x in ['RU']]\n",
    "\n",
    "H.set_dict_options(options)\n",
    "H.add_data_set(data1, 'map', 'UTC')\n",
    "H.add_data_set(data2, 'map', 'UTC + 1')\n",
    "H.add_data_set(data3, 'map', 'UTC + 2')\n",
    "H.add_data_set(data4, 'map', 'UTC + 3')\n",
    "\n",
    "H.set_map_source('http://code.highcharts.com/mapdata/custom/europe.js', jsonp_map=False) # set map data from src. data is in .js format\n",
    "\n",
    "H"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
